<template>
	<view>
		<u-tabs :is-scroll="false" :current="current" @change="change"
			:list="[{name: '全部'},{name: '待支付'},{name: '待出行'}]"></u-tabs>
		<view class="order-list" v-if="orderList.length">
			<view class="order-item" v-for="(order,index) in orderList"
				:key='index'>
				<view class="order-date" :class="{cur:order.order_status!= 5 || order.order_status!=6}">
					预定日期: {{order.create_time}}
				</view>
				<view class="order-info">
					<view class="" @click="navTo('./planeOrderDetail?id='+order.order_id)">
						<view class="top">
							<view class="left">
								<image src="../../../static/imgs/feiji.png" class="icon"></image>
								<text>{{order.departure}} ---- {{order.arrival}}</text>
							</view>
							<text class="price"> ¥ {{order.total_amount}}</text>
						</view>
						<view class="center">
							<text class="time">{{order.dep_time.split(' ')[1]}} 至 {{order.arr_time.split(' ')[1]}}</text>
							<text class="status"
								:class="{cur:order.order_status!= 5 || order.order_status!=6}">{{order.order_status_name}}</text>
						</view>
						<view class="center">
							<text class="time">{{order.flight_no}} / {{order.dep_jetquay}}</text>
						</view>
					</view>
					
				
					<view class="bottom">
						<view class="btn" v-if="order.order_status == 1" @click="toPay(order.pay_id)">去支付</view>
						<view class="btn" v-if="order.order_status == 1 || order.order_status == 3"
							@click="cancle(order.order_id)">取消</view>
						<view class="btn" style="margin: 0;" v-if="order.order_status == 5"
							@click="delect(order.order_id)">删除</view>
					</view>
				</view>
			</view>
		</view>
		<view class="noCont" style="padding-top: 320rpx;" v-else>
			<u-empty text="暂无订单" mode="list"></u-empty>
		</view>

		<u-popup v-model="showPay" mode="bottom" :closeable='true' border-radius='16'>
			<view class="payPop">
				<view class="title">
					选择支付方式
				</view>
				<view class="pay-ul">
					<view class="pay-li">
						<view class="pay-li-left">
							<image src="../../../static/imgs/weixinzf.png" mode=""></image>
							<text>微信</text>
						</view>
						<u-checkbox v-model="weiPaycheck" shape="circle" @change="weiChange" size="30"></u-checkbox>
					</view>
					<view class="pay-li">
						<view class="pay-li-left">
							<image src="../../../static/imgs/zhifubaozf.png" mode=""></image>
							<text>支付宝</text>
						</view>
						<u-checkbox v-model="alPaycheck" shape="circle" @change="aliChange" size="30"></u-checkbox>
					</view>
				</view>
				<view class="pay" @click="confirmPay">
					支付
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import myRequest from '@/api/index.js'
	export default {
		data() {
			return {
				weiPaycheck: false,
				alPaycheck: false,
				current: 0,
				page: '1',
				type: 0,
				orderList: [],
				showPay: false,
				payCode: '',
				payId: ''
			};
		},
		onLoad() {
			this.getAirOrderList()
		},
		onReachBottom() {
			let page = Number(this.page) + 1
			this.page = page.toString()
			this.getAirOrderList()
		},
		methods: {
			cancle(id){
				let that = this
				uni.showModal({
					content: '是否取消该订单',
					success: function(res) {
						if (res.confirm) {
							that.cancleFn(id)
						}
					}
				})
			},
			delect(id){
				let that =this
				uni.showModal({
					content: '是否删除该订单',
					success: function(res) {
						if (res.confirm) {
							that.delectFn(id)
						}
					}
				})
			},
			// 取消
			async cancleFn(orderId) {
				let res = await myRequest.celAirOrder({
					page: this.page,
					order_id: orderId
				})
				if (res.status) {
					uni.showToast({
						title: '已取消该订单',
						icon: 'none'
					})
					this.page ='1'
					this.orderList = []
					this.getAirOrderList()
				}
			},
			// 删除
			async delectFn(orderId) {
				let res = await myRequest.delAirOrder({
					page: this.page,
					order_id: orderId
				})
				if (res.status) {
					uni.showToast({
						title: '已删除',
						icon: 'none'
					})
					this.page ='1'
					this.orderList = []
					this.getAirOrderList()
				}
			},
			// 支付
			toPay(id) {
				this.payId = id
				this.showPay = true
			},
			confirmPay() {
				uni.navigateTo({
					url: '../pay/pay?payCode=' + this.payCode + '&payId=' + this.payId
				})
			},
			weiChange(e) {
				if (e.value) {
					this.alPaycheck = false
					this.payCode = '6004'
				}
			},
			aliChange(e) {
				if (e.value) {
					this.weiPaycheck = false
					this.payCode = '6005'
				}
			},
			// 获取订单列表
			async getAirOrderList() {
				let {
					page,
					type
				} = this
				let res = await myRequest.getAirOrderList({
					page: page,
					type: type.toString()
				})
				if (res.status) {
					this.orderList = [...this.orderList, ...res.data]
				}
			},
			change(e) {
				this.current = e
				this.orderList = []
				this.page = '1'
				if (e == 0) {
					this.type = 0
				}
				if (e == 1) {
					this.type = 1
				}
				if (e == 2) {
					this.type = 2
				}
				this.getAirOrderList()
			},
			navTo(url) {
				uni.navigateTo({
					url:url
				})
			}
		}
	}
</script>

<style lang="scss">
	.order-list {

		.order-item {
			padding: 20rpx;

			.order-date {
				color: #FFFFFF;
				background: #D0D2D5;
				border-radius: 30rpx;
				padding: 10rpx 10rpx;
				width: fit-content;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 24rpx;

				&.cur {
					background: #3587F7;
				}
			}

			.order-info {
				background-color: #FFFFFF;
				border-radius: 20rpx;
				display: flex;
				flex-direction: column;
				padding: 20rpx;
				margin-top: 10rpx;

				.top {
					display: flex;
					align-items: center;
					justify-content: space-between;
					width: 100%;
					margin-bottom: 20rpx;

					.left {
						display: flex;
						align-items: center;
						justify-content: center;

						.icon {
							width: 50rpx;
							height: 50rpx;
							margin-right: 20rpx;
						}
					}

					.price {
						color: #333333;
						font-size: 32rpx;
					}
				}

				.center {
					display: flex;
					align-items: center;
					justify-content: space-between;
					width: 100%;
					margin-bottom: 20rpx;

					.time {
						font-size: 28rpx;
						font-weight: 400;
						color: #999999;
					}


					.status {
						color: #333333;
						font-size: 28rpx;

						&.cur {
							color: #3587F7;
						}
					}
				}

				.bottom {
					display: flex;
					align-items: center;
					justify-content: flex-end;
					width: 100%;

					.btn {
						background-color: #FFFFFF;
						border: 2rpx solid #999999;
						color: #999999;
						padding: 10rpx;
						border-radius: 10rpx;
						margin-right: 20rpx;
						font-size: 24rpx;
					}
				}
			}
		}
	}


	.payPop {
		padding-bottom: 20rpx;

		.title {
			width: 375px;
			height: 100rpx;
			line-height: 100rpx;
			text-align: center;
		}

		.pay-ul {

			.pay-li {
				width: 694rpx;
				height: 100rpx;
				background: #FFFFFF;
				margin: 0 auto;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.pay-li-left {
					display: flex;
					align-items: center;

					image {
						width: 44rpx;
						height: 44rpx;
					}

					text {
						font-size: 32rpx;
						font-family: Alibaba Sans;
						font-weight: 400;
						color: #333333;
						margin-left: 20rpx;
					}
				}

			}
		}

		.pay {
			width: 694rpx;
			height: 88rpx;
			background: linear-gradient(56deg, #FEA837 0%, #FF7700 100%);
			margin: 0 auto;
			border-radius: 8rpx;
			font-size: 40rpx;
			font-family: Arial;
			font-weight: 400;
			color: #FFFFFF;
			line-height: 88rpx;
			text-align: center;
			margin-top: 40rpx;
		}
	}
</style>
